<template>
  <div class="order">
    <ul class="order-nav" v-if="from!='credit'">
      <li :class="{'order-nav-item':true ,select:status==''}" @click="getOrderList('')">全部</li>
      <li :class="{'order-nav-item':true ,select:status=='1'}" @click="getOrderList('1')">待付款</li>
      <li :class="{'order-nav-item':true ,select:status=='3'}" @click="getOrderList('3')">待收货</li>
      <!-- <li :class="{'order-nav-item':true ,select:status=='8'}" @click="getOrderList('8')">待分享</li> -->
      <li :class="{'order-nav-item':true ,select:status=='2'}" @click="getOrderList('2')">待发货</li>
      <li :class="{'order-nav-item':true ,select:status=='4'}" @click="getOrderList('4')">待评价</li>
    </ul>
    <ul class="order-item" :class="{normal_top:from!='credit'}">
      <li v-for="(value,index) in orderList" :key='index' style="margin-bottom:15px;background:#fff" @click="toOrderDetail(value)">
        <div class="order-item-header">
          <div class="order-item-num">订单号: {{value.order_num}}</div>
          <div v-if="value.status=='1'" class="order-item-status">待付款</div>
          <div v-if="value.status=='3'" class="order-item-status">待收货</div>
          <div v-if="value.status=='2'" class="order-item-status">待发货</div>
          <div v-if="value.status=='4'" class="order-item-status">待评价</div>
          <div v-if="value.status=='5'" class="order-item-status">已完成</div>
          <div v-if="value.status=='6'" class="order-item-status">交易关闭</div>
          <div v-if="value.status=='8'" class="order-item-status">已付款</div>
        </div>
        <div class="order-item-details" v-for="(value1,index1) in value.order_item" :key='index1'>
          <img :src="value1.goods_info.thumb_url" class="order-item-details-img" mode="aspectFill"/>
          <div class="order-item-details-name">
            <div class="details-name">
                <!-- <span class="details-tip">海外购</span> -->
                {{value1.goods_info.name}}
            </div>
            <div class="details-name">
                {{value1.goods_info.info}}
            </div>
            <div class="details-number">
              <div class="details-number-money" v-if="value.type!='integral'">￥{{value1.s_price}}</div>
              <div class="details-number-money" v-else>积分 {{value1.goods_info.exchange_integral}}</div>
              <div class="details-number-number">X{{value1.num}}</div>
            </div>
          </div>
        </div>

        <div class="order-item-header" v-if="from!='credit'">
          <div class="order-item-num1" v-if="value.type!='integral'">合计:￥{{value.s_amount}}</div>
          <div class="order-item-num1" v-else>共花积分: {{value.integral}}</div>
          <div class="order-item-status1">(含运费￥{{value.express_fee}})</div>
        </div>
        <div class="order-item-btn" v-if="from!='credit'">
          <div class="order-item-btn-pay" v-if="value.status=='1'" @click.stop="payment(value)">马上付款</div>
          <div class="order-item-btn-pay" v-if="value.status=='4'" @click.stop="toComment(value.order_num,value.order_item[0].good_id,value.order_item[0].good_spu_id)">去评论</div>
          <div class="order-item-btn-canel" v-if="value.status=='1' ||value.status=='2'" @click.stop="cancel(value.order_num)">取消订单</div>
          <div class="order-item-btn-pay" v-if="value.status=='3'" @click.stop="recieve(value.order_num)">确认收货</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>


export default {
  components: {
    
  },

  data () {
    return {
      orderList:[],
      status:"",
      page:0,
      from:''//为credit，来自积分商城
    }
  },
  methods:{
    async getOrderList(status){
      wx.showLoading()
      var userToken=wx.getStorageSync('userToken')
      if(this.status!=status){
        this.orderList=[];
        this.page=0;
      }
      let res=await this.$request.getData('/order/getUserAllOrders',{user_token:userToken,status:status,page:this.page,limit:5})
      this.orderList=this.orderList.concat(res.data.data)
      this.status=status
      wx.hideLoading()
    },
    toComment(num,id,goods_spu){
      this.$currency.navigateTo('/pages/comment/main?order_num='+num+'&goods_id='+id+'&goods_spu='+goods_spu)
    },
    async payment(value){
       let _this=this
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.postData('/payment/weChatPayment',{'order_num':value.order_num,user_token:userToken})
      let data=res.data.data
      wx.requestPayment({
        timeStamp: data.timeStamp,
        nonceStr: data.nonceStr,
        package: data.package,
        signType: data.signType,
        paySign: data.paySign,
        success() {
          _this.$currency.showToast('支付成功')
          setTimeout(()=>{
            wx.switchTab({url:'/pages/me/main'})
          },1500)
        },
        fail(res) {
          console.log('取消支付')
        }
      })
    },
    async cancel(order_num){
      let res=await this.$currency.showModal('取消订单','是否取消订单')
      if(res){
         var userToken=wx.getStorageSync('userToken')
         let data=await this.$request.postData('/order/cancelOrder',{order_num:order_num,user_token:userToken})
         this.$currency.showToast(data.data.message)
         this.orderList=[];
         this.page=0;
         this.getOrderList(this.status)
      }
    },
    async recieve(order_num){
      let res=await this.$currency.showModal('确认收货','是否确认收货')
      if(res){
         var userToken=wx.getStorageSync('userToken')
         let data=await this.$request.postData('/order/confirmReceipt',{order_num:order_num,user_token:userToken})
         this.$currency.showToast(data.data.message)
         this.orderList=[];
         this.page=0;
         this.getOrderList(this.status)
      }
    },
    toOrderDetail(value){
      if(value.type=='group'){
        this.$currency.navigateTo(`/pages/assembleDetail/main?order_num=${value.order_num}`)
      }else{
        this.$currency.navigateTo(`/pages/orderDetail/main?num=${value.order_num}`)
      }
      
    }
  },
  onShow(){
    this.orderList=[];
    this.page=0;
    this.getOrderList(this.status)
  },
  onReachBottom(){
    this.page++
    this.getOrderList(this.status)
  },
  onLoad(options){
    this.status=options.status==undefined?'':options.status
    if(options.status){
      this.status=options.status
    }
    this.from=options.from==undefined?'':options.from
  }
}
</script>

<style scoped lang="scss" type="text/css">
.normal_top{
  padding-top:60px !important;
}
  .flexBetween{
    display:flex;
    justify-content:space-between;
  }
  .order{
    width:100%;
    vertical-align:center !important;
    box-sizing: content-box !important;
    font-size: 14px;
    &-item{
      background:#eee;
      padding-top:15px;
    }
    &-nav{
      position: fixed;
      top:0px;
      border-top:1px solid #eee;
      width:100%;
      height:40px;
      display:flex;
      background: #fff;
      &-item{
        flex:1;
        text-align:center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .select{
        color:red;
      }
      .select::after{
        content:'';
        height: 2px;
        margin-top:5px;
        width:40px;
        background: red;
      }
    }
    &-item-header{
      width:calc(100% - 40px);
      margin:0px 20px;
      border-bottom:1px solid #eee;
      line-height:40px;
      font-size: 14px;
      @extend .flexBetween; 
      .order-item-num{
        line-height:40px;
      }
      .order-item-status{
        line-height:40px;
        color:red;
      }
      .order-item-num1{
        color:red
      }
    }
    &-item-details{
      width:calc(100% - 40px);
      margin:0px 20px;
      border-bottom:1px solid #eee;
      display:flex;
      height:100px;
      &-img{
        width:60px;
        height:60px;
        margin:20px 10px;
      }
      &-name{
        flex:1;
        margin-left:20px;
        overflow: hidden;
      }
      .details-name{
        margin-top:10px;
        height:24px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        .details-tip{
          width:60px;
          line-height:25px;
          border:1px solid black;
          border-radius:5px;
        }
      }
      .details-number{
        width:100%;
        line-height:25px;
        @extend .flexBetween; 
      }
    }
    &-item-btn{
      width:100%;
      height:45px;
      .order-item-btn-canel{
        width:70px;
        line-height:25px;
        border:1px solid #eee;
        border-radius: 4px;
        text-align:center;
        float:right;
        margin:10px;
        font-size:12px;
      }
      .order-item-btn-pay{
        @extend .order-item-btn-canel;
        border:1px solid red !important;
        color:red;
        border-radius: 4px;

      }
    }
  }
</style>
